<template>
    <section class="video-block">  
        <!-- 购买 -->
        <div class="video-course-block" v-if="isBuy">
            <video id="video"
                @contextmenu.prevent="videoClickRight"
                @timeupdate="updateTime"
                style="width:800px;height:382px" 
                :src="defaultSrc" 
                controls 
                controlslist="nodownload" 
                preload="auto">
            </video>
            <div class="video-course-sideBar">
                <Tabs value="directory" @on-click="handlerTabPane">
                    <TabPane label="目录" name="directory">
                        <ul>
                            <li v-for="(item,index) in allPart" :key="item.id">
                                <div class="course-chapter">章节{{index + 1}}&nbsp;&nbsp;{{ item.name }}</div>
                                <p class="course-content" v-for="val in item.videos" :key="val.id">
                                    <a @click="getVideoId(val)">{{val.name}}</a>
                                    <Icon class="icon" type="logo-youtube"/>
                                </p>
                            </li>
                        </ul>
                    </TabPane>
                    <TabPane label="笔记" name="notes">
                        <div class="course-notes">
                            <Input  placeholder="在此输入文字" type="textarea" :rows="10" v-model="notesContent"/>
                            <Button style="margin:10px 0;float:right;background-color:#68AAFD;color:#fff" 
                                @click="create_Note"
                            >
                                提交
                            </Button>
                        </div>
                    </TabPane>
                    <TabPane label="Notebook" name="Notebook">
                        <div class="notebook-block">
                            <div class="notebook-list">
                                <div class="single-notebook" v-for="item in allNotebook" :key="item.taskId"  @click="postMes(item)">
                                    {{ item.name }}
                                </div>
                            </div>
                            <div class="create-notebook-button">
                                <Button style="width:160px;background-color:#68AAFD;color:#fff" @click="toOrderProject">创建Notebook</Button>
                            </div>
                        </div>
                    </TabPane>
                </Tabs>
            </div>
        </div>
        <!-- 未购买 -->
        <div v-else class="course-cover-block">
            <img :src="courseInfo.imagePath" width="480px">
            <div class="course-cover-info">
                <div>
                    <p>{{ courseInfo.grade}}</p>
                    <h2>{{courseInfo.name}}</h2>
                </div>
                <p>共{{ courseInfo.partCount }}课时</p>
                <p>{{ $t('langObj.teacher') }}:{{ courseInfo.lecturer }}</p>
                <p>{{ $t('langObj.time') }}:{{ startTime }} - {{ endTime }}</p>
                <p class="conicnt-block">{{ courseInfo.coinCnt }} {{ $t('langObj.coupon') }}</p>
                <Button type="error" @click="toBuy">{{ $t('langObj.buy') }}</Button>
            </div>
        </div>
        <div class="video-course-menu">
            <ul>
                <li>
                    <router-link :to="{name:'introduction'}" active-class="active-class-bg">{{ $t('langObj.intro') }}</router-link>
                </li>
                <li v-if="isBuy">
                    <router-link :to="{name:'discuss'}" active-class="active-class-bg">{{ $t('langObj.discuss') }}</router-link>
                </li>
                <li v-if="isBuy">
                    <router-link :to="{name:'notes'}" active-class="active-class-bg">{{ $t('langObj.note') }}</router-link>
                </li>
                <li v-if="isBuy">
                    <router-link :to="{name:'question'}" active-class="active-class-bg">{{ $t('langObj.question') }}</router-link>
                </li>
                <li>
                    <router-link :to="{name:'comment'}" active-class="active-class-bg">{{ $t('langObj.comment') }}</router-link>
                </li>
                <li v-if="isBuy">
                    <router-link :to="{name:'notebook'}" active-class="active-class-bg">Notebook</router-link>
                </li>
            </ul>
        </div>
        <router-view class="video-course-content"></router-view>
    </section>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
import { formatData } from '@/utils/format';
export default {
    props:['id'],
    inject:['reload'],
    computed: {
        ...mapGetters({
            isBuy:"isBuy",
            allPart:"allPart",
        }),
        startTime(){
            return formatData(this.courseInfo.startTime)
        },
        endTime(){
            return formatData(this.courseInfo.endTime)
        }
    },
    data(){
        return{
            scrollY:1,
            courseInfo:{},
            watchTime:0,
            defaultVideoId:null,
            defaultSrc:"",
            selectLinkInfo:{},
            notesContent:"",
            allNotebook:[],
        }
    },
    methods: {
        ...mapActions(['XgetCoursePrice','XgetCoursePart','XcreateNote','XgetNotebookList','XprojectView']),
        toBuy(){
            this.$router.push({path:`/order/${this.id}/${0}/${0}`})
        },
        // 屏蔽右键
        videoClickRight(){
            return false;
        },
        handlerTabPane(name){
           if(name === 'notes'){
               this.$router.push({
                   path:`/education/${this.id}/notes`
               })
           }
        },
        getVideoId(val){
            this.defaultSrc = val.link
            this.selectLinkInfo = val
            setTimeout(() => {
                 document.getElementById("video").play()
            },20)
        },
        updateTime(e){
            this.watchTime = e.target.currentTime
        },
        create_Note(){
            if(this.notesContent.trim()){
                this.XcreateNote({
                content:this.notesContent,
                description:"",
                name:"",
                video_id:this.selectLinkInfo.id || this.defaultVideoId,
                watch_point:this.watchTime
            }).then(res => {
                this.$Message.success("创建成功");
            }).catch(err => {
                this.$Message.error(err.response.data.message)
            })
            } 
        },
        postMes(item){
            this.mountedGetList();
            this.XprojectView(item.taskId).then(({data}) => {
                this.$router.push({path:`/education/${this.id}/notebook?
                    url=${encodeURIComponent('http://' + data)}
                    &taskId=${item.taskId}
                    &qidong=${item.qidong}&fenxiang=${item.fenxiang}&shifang=${item.shifang}&shanchu=${item.shanchu}`});
            }).catch(err => {
                this.$router.push({path:`/education/${this.id}/notebook?
                    taskId=${item.taskId}
                    &qidong=${item.qidong}&fenxiang=${item.fenxiang}&shifang=${item.shifang}&shanchu=${item.shanchu}`});
            })
            document.documentElement.scrollTop = document.querySelector(".video-course-menu").offsetTop;
        },
        toOrderProject(){
            this.$router.push({path:`/order/${this.id}/${2}/${0}?type=course`})
        },
        async mountedGetList(){
            if(this.isBuy){
                let [test = {}, allNotebook] = await Promise.all([this.XgetCoursePart(this.id),this.XgetNotebookList({dataId:this.id,type:1})]);
                this.allNotebook = allNotebook.data;
                // 谨慎操作,取默认videoId提交笔记
                this.defaultVideoId = this.allPart[0].videos[0].id;
            }else{
                this.XgetCoursePrice(this.id).then(res => {
                    this.$router.push({path:`/education/${this.id}/introduction`});
                    this.courseInfo = res.data
                })
            } 
        },
        _handleScroll(){
            this.scrollY = document.querySelector(".video-course-menu").offsetTop - window.pageYOffset
        },
    },
    mounted() {
        this.mountedGetList()
        window.scrollTo(0,0);
        window.addEventListener('scroll', this._handleScroll, false);
    },
    beforeDestroy(){
        window.removeEventListener('scroll', this._handleScroll); 
    },
    watch: {
        scrollY(newVal){
            if(newVal >= 0 && document.getElementById("video")){
                if(document.getElementById("video")=== document.pictureInPictureElement){
                    document.exitPictureInPicture();
                } 
            }else if(newVal < 0 && document.getElementById("video")){
                if(document.getElementById("video") !== document.pictureInPictureElement){
                    document.getElementById("video").requestPictureInPicture()   
                }
            }
        },
        isBuy(){
            this.reload()
        }
    },
}
</script>

<style lang="scss">
    .video-course-sideBar{
        height: 382px;
        .ivu-tabs{
            .ivu-tabs-bar{
                margin-bottom: 0px;
            }
            .ivu-tabs-content-animated{
                height: 342px;
            }
            .ivu-tabs-tabpane{
                overflow: auto;
            }
        }
        .ivu-tabs-nav{
            width: 400px;
            display: flex;
            justify-content: space-between; 

        }
        .ivu-tabs-ink-bar{
            display: none;
        }
        .ivu-tabs-nav .ivu-tabs-tab-active {
            border-bottom: 4px solid #2d8cf0 !important;
        }
    }
</style>

<style lang="scss" scoped>
    .video-block{
        width: 1200px;
        margin:0 auto;
        padding:16px 0;

        // 没购买封面样式
        .course-cover-block{
            display: flex;
            height:382px;
            padding:40px 60px;
            background-color:#f9fafa;
            border-bottom: 1px solid #f7f7f7;

            .course-cover-info{
                flex:1;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: space-between;
                margin-left:100px;
                font-size:12px;
                font-weight:400;
                color:rgba(153,153,153,1);

                & > div:first-of-type{
                    display: flex;
                    align-items: center;
                    height: 30px;
                    p{
                        width:47px;
                        height:17px;
                        color:#fff;
                        background:rgba(104,170,253,1);
                        border-radius:6px;
                        text-align: center;
                    }
                    h2{
                        margin-left:20px;
                        font-size:24px;
                        font-weight:400;
                        color:rgba(51,51,51,1);
                    }
                }
            }
            .conicnt-block{
                font-size:16px;
                font-weight:400;
                color:rgba(243,101,57,1);
            }
        }

        // 购买video样式
        .video-course-block{
            display: flex;
            height:382px;
            background-color: #fff;
            border-bottom: 1px solid #f7f7f7;
            .video-course-sideBar{
                flex: 1;
                background:rgba(237,238,243,1);
                ul{
                    padding: 15px;
                    .course-chapter{
                        margin-bottom: 10px;
                        font-size:14px;
                        font-weight:600;
                        color:rgba(153,153,153,1);
                    }
                    .course-content{
                        margin:10px 20px;
                        font-weight:600;
                        color:rgba(102,102,102,1);
                        display: flex;
                        justify-content: space-between;

                        & > a:hover{
                            color: #57a3f3;
                        }
                    }

                }
                .course-notes{
                    padding: 15px;
                }
                .notebook-block{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    height: calc(100% - 10px);
                }
                .notebook-list{
                    flex:1;
                }
                .single-notebook{
                    margin: 15px;
                    height: 50px;
                    line-height: 50px;
                    padding-left: 10px;
                    &:hover{
                        background-color: #68AAFD;
                        color: #fff;
                        cursor: pointer;
                    }
                }
                .create-notebook-button{
                    height:30px;
                    text-align: center;
                }
            }          
        }
        .video-course-menu{
            background-color: #fff;
            border-bottom: 1px solid #f7f7f7;
            ul li{
                display: inline-block;
                height: 80px;
                line-height: 80px;
                a{
                    display: inline-block;
                    color: #333;
                    margin:0 16px;
                    padding: 0 30px;
                    &:hover{
                        color:#C2142F !important;
                        border-bottom: 4px solid #C2142F;
                    }
                }
            }
        }
        .video-course-content{
            margin-top: 20px;
            background-color: #fff;
            padding: 30px;
        }
    }
</style>